<template>
  <div class="nav_outer">
    <Header tooltext="保存" @herttool="savelocation">期望城市</Header>
    <div class="content">
        <div class="choosed">
            <p>已选</p>
            <div class="choosed_citys">
              <div class="choosed_city" v-show="choosedCity.name">
                <span>{{choosedCity.name || ''}}</span>
                <i></i>
              </div>
            </div>
        </div>
        <div class="choosearea">
          <div class="provinces">
            <div :class="{'province':true,'on':hot}" @click="gethot">热门城市</div>
            <div :class="{'province':true,'on':item.choose}" v-for="item in provinces" v-bind:key="item.id" @click="loadCity(item)">{{item.name}}</div>
          </div>
          <div class="citys">
            <div class="city on" v-for="item in citys" v-bind:key="item.id" @click="chooseCity(item)">{{item.name}}</div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/commonComponents/Header'
export default {
  data() {
    return {
      provinces:[],
      citys: [],
      hot: true,
      hotcitys: [{name:'苏州',id:1010},{name:'盐城',id:1020}],//{name:'上海'},{name:'北京'},{name:'常州'},{name:'深圳'},{name:'广州'}],
      choosedCity:{}
    }
  },
  mounted() {
    let mui = this.mui;
  },
  created(){
    this.citys = this.hotcitys;
    this.loadprovince();
  },
  methods: {
    savelocation(){
      let choose = this.choosedCity;
      this.$router.replace(`/expectjob?name=${choose.name}&id=${choose.id}`);
    },
    loadprovince(){
      this.Http.get("/yzj/location/provinces", null).then(
        res => {
          this.provinces = res;
        }
      );
    },
    loadCity(item){
      this.provinces.forEach((item)=>{
        item.choose = false;
      })
      item.choose = true;
      this.hot = false;
      this.Http.get(`/yzj/location/city/${item.name}`, null).then(
        res => {
          this.citys = res;
        }
      );
    },
    gethot(){
      this.provinces.forEach((item)=>{
        item.choose = false;
      });
      this.hot = true;
      this.citys = this.hotcitys;
    },
    chooseCity(item){
      this.choosedCity = item;
    }
  },
  components: {
    Header
  }
}
</script>

<style lang='scss' scoped>
  @function px2em($px) {
    @if (unitless($px)) {
      @return px2em($px + 0px);
    } @else if (unit($px) == em) {
      @return $px;
    }
    @return ($px / 75px) * 1rem;
  }
  body{
      background: #F5F5F5!important;
  }
  .choosed{
    padding: px2em(30);
    background: #fff;
    >p{
      margin-bottom: px2em(34);
    }
  }
  .choosed_city{
    background: rgba(84, 117, 253, .1);
    display: inline-block;
    padding: 4px 10px;
    margin-right: 1em;
    color: #5475FD;
    >i:before{
      content: '×';
      font-style: normal;
      font-size: 16px;
    };
  }
  .choosearea{
    display: flex;
    margin-top: 2px;
    .provinces{
      width: px2em(220);
      background: #fff;
      height: px2em(700);
      overflow-y: auto;
    }
    .province{
      margin: px2em(24) 0;
      padding: 4px 0 4px px2em(34);
      border-left: 6px solid #fff;
      &.on{
        border-color: #4B81F2;
        color: #4B81F2;
      }
    }
    .citys{
      flex: 1;
    }
    .city{
      float: left;
      width: 33.3333333%;
      padding: px2em(46) 0;
      text-align: center;
      &.on{
        color: #6993F3;
      }
    }
  }
</style>